<template>
	<view :class="is_preview ? 'prev_img' : 'prev_img hide'" @click="showHide">
		<view class="prev_bg"></view>
		<view class="prev_img_main">
			<image :src="imgurl" mode="widthFix"></image>
			<view class="prev_desc">
				<view class="title">{{title}}</view>
				<view class="price">¥ {{price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'MhOpen',
		props : {
			is_preview: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: '',
			},
			price: {
				type: String,
				default: '',
			},
			imgurl: {
				type: String,
				default: 'http://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20241029/b39f84cd211087b5aa12e35f457a3729.png',
			},
		},
		methods : {
			showHide(){
				this.$emit("closePrevimg");
				console.log(this.is_preview);
			}
		}
	}
</script>

<style lang="scss" scoped>
.prev_img{
	position: fixed;
	z-index: 500;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	z-index: 5000;
	&.hide{
		display: none;
	}
	.prev_bg{
		position: absolute;
		width: 100%;
		height:100%;
		top: 0;
		left: 0;
		background: rgba(0,0,0,1);
	}
	.prev_img_main{
		position: relative;
		width: 100%;
		text-align: center;
		image{
			max-width: 98%;
		}
		.prev_desc{
			padding:15px;
			width: 100%;
			text-align: center;
			color:#fff;
			
			.title{
				font-size: 15px;
			}
			.price{ 
				margin-top:10px;
				color:red;
			}
		}
	}
}
</style>